<template>
	<view class="container">
		<view class="tip">
			提示：发货前订单仅支持修改一次，修改后可能会影响物流时效。
		</view>
		<!-- <view class="address-box">
			<view class="title">
				<text>原地址：</text>
			</view>
			<view class="a-box now">
				<view class="left">
					<view class="user">
						<text class="name">{{nowAddress.name}}</text><text class="phone">{{nowAddress.mobile}}</text>
					</view>
					<view class="city-info">
						{{nowAddress.formatted_address.split('/').join(' ')+' '+nowAddress.address}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="address-box select-box">
			<view class="title">
				<text>选择新的收货人地址</text>
				<text class="add">地址管理</text>
			</view>
			<view class="select-list">
				<view class="a-box s-item" v-for="(item,i) in addressList" :key="item.id">
					<view class="left">
						<view class="user">
							<text class="name">{{item.name}}</text><text class="phone">{{item.mobile}}</text><text v-if="item.default=='1'" class="mo">默认</text>
						</view>
						<view class="city-info">
							{{item.formatted_address.split('/').join(' ')+' '+item.address}}
						</view>
					</view>
					<view class="right" @click="select(item)">
						<image v-if="n_a_id==item.id" :src="$img_path('/mall/18.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/mall/19.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="bottom-btn">
			<view class="b-btn">
				<view class="b">
					<button @click="submit">提交修改</button>
				</view>
			</view>
		</view>
		
		<popupBox ref="tishi" :isSlot="true" type="center">
			<view class="t-con">
				<view class="title">
					提示
				</view>
				<view class="con">
					您修改地址的次数已用完
					当前无法在进行修改
				</view>
				<view class="btn">
					<button @click="close">知道了</button>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import { getaddress, editOrderAddress } from '@/utils/api/mallApi.js'
	import popupBox from '../../../components/popup/popup.vue';
	export default {
		components:{
			popupBox
		},
		data() {
			return {
				n_a_id:null,
				order_id:null,
				nowAddress:null,
				addressList:[],
				page:1,
				total:0,
				last_page:0,
			};
		},
		onLoad(options) {
			this.order_id = options.id
			// this.n_a_id = options.address_id
			this.getaddress()
		},
		onShow() {
			// this.$refs.tishi.open()
		},
		methods:{
			getaddress(){
				uni.showLoading({})
				getaddress({page:this.page}).then(res=>{
					if(this.page==1){
						this.addressList = res.data.data
					}else{
						this.addressList = [...this.addressList,...res.data.data]
					}
					
					this.n_a_id = this.addressList[0].id
					// let n_a = this.addressList.filter(e=>{
					// 	return e.id == this.n_a_id
					// })
					// this.nowAddress = n_a[0]
					
					this.total = res.data.total
					this.last_page = res.data.last_page
					uni.hideLoading()
				})
			},
			select(data){
				this.n_a_id = data.id
			},
			
			close(){
				this.$refs.tishi.close()
			},
			submit(){
				editOrderAddress({
					address_id:this.n_a_id,
					id:this.order_id
				}).then(res=>{
					if(res.data==null){
						this.$refs.tishi.open()
					}
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				})
			}
		},
		onReachBottom() {
			if(this.last_page>this.page){
				this.page++
				this.getaddress()
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	.tip{
		font-weight: 400;
		font-size: 28rpx;
		color: #FF4A4A;
		line-height: 40rpx;
		padding: 22rpx;
		box-sizing: border-box;
		background: #FFEEEE;
	}
	.address-box{
		padding: 20rpx 22rpx 0;
		box-sizing: border-box;
		.title{
			text{
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
			}
		}
		.a-box{
			// background: #FFFFFF;
			// border-radius: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			.left{
				width: calc(100% - 48rpx);
				padding-right: 20rpx;
				box-sizing: border-box;
				.user{
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					.phone{
						margin-left: 20rpx;
					}
					.mo{
						display: inline-block;
						width: 58rpx;
						height: 32rpx;
						background: #E72A2A;
						border-radius: 8rpx;
						font-weight: bold;
						font-size: 16rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: center;
						margin-left: 12rpx;
					}
				}
				.city-info{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-top: 14rpx;
				}
			}
			.right{
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	.select-box{
		border-top: 20rpx solid #EFEFEF;
		margin-top: 20rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.add{
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
			}
		}
		.select-list{
			.s-item{
				box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0,0,0,0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #B4B4B4;
				padding: 28rpx 22rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.bottom-btn{
		width: 100%;
		height: calc(136rpx + constant(safe-area-inset-bottom));
		height: calc(136rpx + env(safe-area-inset-bottom));
		
		.b-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.b{
				padding: 20rpx 22rpx;
				box-sizing: border-box;
				button{
					height: 96rpx;
					background: linear-gradient( 132deg, #FFA233 0%, #FB4C4C 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
				}
			}
		}
	}
}

.t-con{
	width: 588rpx;
	height: 378rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	.title{
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		line-height: 50rpx;
		text-align: center;
		padding: 48rpx 0 0;
	}
	.con{
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
		text-align: center;
		padding: 24rpx 140rpx 0;
	}
	.btn{
		margin-top: 34rpx;
		button{
			width: 294rpx;
			height: 96rpx;
			background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 80rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			margin: 0 auto;
		}
	}
}
</style>
